<template>
  <div id="app">
    <div class="header">
      <img src="./../../../static/images/logoPhone.png">
      <el-tabs v-model="activeName" class="elTabs">
        <el-tab-pane label="手机端" name="first"></el-tab-pane>
        <el-tab-pane label="PC端" name="second">配置管理</el-tab-pane>
      </el-tabs>
      <p class="headerP1">
        <svg class="icon test422" aria-hidden="true">
          <use xlink:href="#icon-test134"></use>
        </svg>
        <span style='padding-left:5px;'>设置</span>
      </p>
      <p class="headerP2">
        <svg class="icon test80" aria-hidden="true">
          <use xlink:href="#icon-test276"></use>
        </svg>
        <span style='padding-left:5px;'>主题</span>
      </p>
    </div>
    <div class="phone">
      <div class="phone-left">
        <ul class="phoneLeftUl">
          <li>页面管理</li>
          <li @click="li1" :class="{ active: isActive1}">店铺主页</li>
          <li @click="li2" :class="{ active: isActive2}">商品列表</li>
          <li @click="li3" :class="{ active: isActive3}">商品分类</li>
          <li @click="li4" :class="{ active: isActive4}">微页面</li>
          <li>内容管理</li>
          <li @click="li5" :class="{ active: isActive5}">店铺导航</li>
          <li @click="li6" :class="{ active: isActive6}">悬浮窗</li>
          <li @click="li7" :class="{ active: isActive7}">公共广告</li>
          <li @click="li8" :class="{ active: isActive8}">素材库</li>
          <li @click="li9" :class="{ active: isActive9}">店铺模板</li>
        </ul>
      </div>
      <div class="phone-right">
        <div class="liResuant" v-show="liRes">
          <el-row class="liResRow">
            <el-col :span="3">
              <span>页面管理&nbsp;/</span>
              <span>&nbsp;店铺主页</span>
            </el-col>
            <el-col :span="1" :offset="17" class="liResIc1">预览</el-col>
            <el-col :span="1" class="liResIc2">编辑</el-col>
          </el-row>
          <div class="liResImg">
            <h3>market(母婴玩具)</h3>
            <div class="liResInput">
              <input type="text" name id placeholder="商品名称／规格／编号" disabled>
              <span class="el-icon-bell"></span>
            </div>
            <!-- 轮播图1： -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="./../../../static/images/2069_1545968421500.png" alt>
                </div>
                <div class="swiper-slide">
                  <img src="./../../../static/images/2069_1545968421500.png" alt>
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
            </div>
            <!-- 轮播图2 -->
            <el-carousel height="150px" style="border-bottom:4px solid #F9F9F9;padding-bottom:10px">
              <el-carousel-item v-for="item in 2" :key="item">
                <div class="liResFlex" v-for="(site,key) in dlData" :key="key">
                  <dl class="liResDl">
                    <dt>
                      <img :src="site.url" alt>
                    </dt>
                    <dd>{{site.name}}</dd>
                  </dl>
                </div>
              </el-carousel-item>
            </el-carousel>
            <p style="width:100%;height:4px;background-color:#e3e3e3"></p>
            <div class="liResTitle">
              <img src="./../../../static/images/h3.png" alt>
              <div class="liResTitleDiv">
                <img src="./../../../static/images/2069_1545978723527.png" alt>
                <img src="./../../../static/images/2069_1545978723527.png" alt>
              </div>
              <div class="liResTitleDiv">
                <img src="./../../../static/images/2069_1545978723527.png" alt>
                <img src="./../../../static/images/2069_1545978723527.png" alt>
              </div>
            </div>
            <p style="width:100%;height:4px;background-color:#f9f9f9;margin-top:10px"></p>
            <img src="./../../../static/images/6.png" class="liResimg">
            <div class="liResFlex2">
              <img src="./../../../static/images/2069_1545978868737.png" alt>
              <img src="./../../../static/images/2069_1545978868737.png" alt>
              <img src="./../../../static/images/2069_1545978868737.png" alt>
            </div>
            <p style="width:100%;height:4px;background-color:#f9f9f9;margin-top:10px"></p>
            <img src="./../../../static/images/6.png" class="liResimg">
            <div class="liResFlex2">
              <img src="./../../../static/images/2069_1545979201517.png" alt>
              <img src="./../../../static/images/2069_1545979201517.png" alt>
              <img src="./../../../static/images/2069_1545979201517.png" alt>
            </div>
            <img src="./../../../static/images/6.png" class="liResimg2">
            <p style="width:100%;height:4px;background-color:#e3e3e3;"></p>
            <div class="liResFlex2">
              <img src="./../../../static/images/2069_1545979201517.png" alt>
              <img src="./../../../static/images/2069_1545979201517.png" alt>
              <img src="./../../../static/images/2069_1545979201517.png" alt>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  data () {
    return {
      activeName: 'first',
      isActive1: false,
      liRes: true,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false,
      isActive6: false,
      isActive7: false,
      isActive8: false,
      isActive9: false,
      dlData: [{
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }, {
        url: require('./../../../static/images/fen.png'),
        name: '奶粉'
      }]
    }
  },
  mounted () {
    // eslint-disable-next-line no-new
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: true,
      // 如果需要分页器
      pagination: '.swiper-pagination'
    })
  },
  methods: {
    li1 () {
      this.isActive1 = true
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li2 () {
      this.isActive2 = true
      this.isActive1 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
      this.$router.push({
        path: '/marketingMallPhoneList'
      })
    },
    li3 () {
      this.isActive3 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li4 () {
      this.isActive4 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li5 () {
      this.isActive5 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li6 () {
      this.isActive6 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive7 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li7 () {
      this.isActive7 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive8 = false
      this.isActive9 = false
    },
    li8 () {
      this.isActive8 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive9 = false
    },
    li9 () {
      this.isActive9 = true
      this.isActive1 = false
      this.isActive2 = false
      this.isActive3 = false
      this.isActive4 = false
      this.isActive5 = false
      this.isActive6 = false
      this.isActive7 = false
      this.isActive8 = false
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  background-color: #f0fbff;
  border-radius: 50%;
}
#app {
  background-color: #fff !important;
  height: 655px;
}
.header {
  display: flex;
}
.elTabs {
  width: 75%;
  margin-top: 7px;
}
.elTabs /deep/ .el-tabs__item {
  width: 100px;
  text-align: center;
}
.header > img {
  width: 115px;
  height: 25px;
  margin-top: 10px;
  border-bottom: 2px solid #e3e3e3;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 10px;
}
.header > p {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3e3e3;
  height: 25px;
  font-size: 12px;
  color: #595959;
  z-index: 5;
}
.headerP1 {
  padding-right: 30px;
}
.headerP2 {
  padding-right: 67px;
}
.phone {
  display: flex;
  position: relative;
  top: -15px;
  text-align: center;
}
.phoneLeftUl {
  width: 145px;
  height: 610px;
  border-right: 1px solid #e3e3e3;
}
.phoneLeftUl > li:nth-child(1) {
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
}
.phoneLeftUl > li:nth-child(1):hover {
  color: #333;
}
.phoneLeftUl > li:nth-child(6) {
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
}
.phoneLeftUl > li:nth-child(6):hover {
  color: #333;
}
.phoneLeftUl > li {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.phoneLeftUl > li:hover {
  color: #20ade5;
  cursor: pointer;
}
.active {
  background-color: #e6f7ff;
  color: #20ade5;
}
.phone-right {
  width: 100%;
  height: 610px;
  background-color: #f6f8fa;
}
.liResuant {
  margin: 10px;
  margin-bottom:0;
  width: calc(100%-20px);
  height: 600px;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
}
.liResRow {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  border-bottom: 1px solid #e3e3e3;
}
.liResRow span:nth-child(1) {
  color: #8c8c8c;
}
.liResIc1 {
  width: 65px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 35px;
  margin-top: 15px;
  cursor: pointer;
}
.liResIc2 {
  background-color: #20ade5;
  width: 65px;
  height: 35px;
  border-radius: 5px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin: 15px 0px 0px 20px;
  cursor: pointer;
}
.liResImg {
  width: 385px;
  background-color: #fff;
  padding: 5px;
  box-shadow: 0px 0px 5px 3px #f2f2f2;
  margin: 20px;
}
.liResImg > h3 {
  background: url("./../../../static/images/top.png") no-repeat;
  background-size: 100% 100%;
  height: 65px;
  line-height: 85px;
  font-weight: normal;
  color: #fff;
  font-size: 17px;
}
.liResInput {
  width: 384px;
  height: 45px;
  background-color: #f72626;
  margin: 0 auto;
}
.liResInput > input {
  width: 335px;
  height: 25px;
  background-color: #fafafa !important;
  background: url("./../../../static/images/search.png") no-repeat;
  background-position: 0px 3px;
  border: 1px solid #fafafa;
  border-radius: 30px;
  text-indent: 1.5em;
  margin-top: 10px;
}
.liResInput > input::placeholder {
  font-size: 12px;
  color: #b6b6b6;
}
.swiper-container {
  width: 384px;
  height: 210px;
  margin: 0 auto;
}
.swiper-slide > img {
  width: 384px;
  height: 210px;
}
.liResDl {
  float: left;
  width: 25%;
  margin-top: 20px;
}
.liResDl > dd {
  text-align: left;
  padding-left: 7px;
  font-size: 12px;
  color: #666666;
}
.liResFlex {
  padding: 0px 0px 0px 30px;
}
.swiper-container2 {
  width: 384px;
  height: 210px;
  margin: 0 auto;
}
.liResTitle {
  width: 395px;
  background-color: #fff;
  margin-left: -5px;
  border-bottom: 1px solid #f9f9f9;
}
.liResTitle > img {
  width: 100%;
  height: 45px;
}
.liResTitleDiv {
  padding-top: 5px;
}
.liResTitleDiv {
  display: flex;
}
.liResTitleDiv > img {
  width: 50%;
  height: 75px;
}
.liResimg {
  width: 100%;
  border-top: 5px solid #f9f9f9;
}
.liResFlex2 {
  display: flex;
  justify-content: space-around;
}
.liResFlex2 > img {
  width: 30%;
  height: 30%;
}
.liResimg2 {
  width: 100%;
  border-bottom: 5px solid #f9f9f9;
}
</style>
